<script setup lang="ts">
import type {TypeTourInfo} from "~/utils/client";
import useAuthStore from "~/stores/authStore";
import {toast} from "~/components/ui/toast";
import {useField} from "vee-validate";
import axios from "axios";
const route = useRoute()

const tourData = ref<TypeTourInfo>()

const authStore = useAuthStore()

const getTourInfo = async (id:number) => {
  if (id) {
    const {data, error, response} = await client.getTour(id)
    if (data) {
      tourData.value = data
      loaderState.value = false
    }
    if (error) {
      console.log(error)
    }
  }
  else {
    navigateTo('/tours')
  }
}
const loaderState = ref(true)
getTourInfo(Number(route.params.id))

const bookTour = async (id:number) => {
  const {data, error, response} = await client.bookTour(id)
  if (data) {
    toast({
      title: 'Тур успешно забронирован.',
    })
    navigateTo('/cabinet')
  }
}

const removeBookTour = async (id:number) => {
  const { data, error, response } = await client.removeBookTour(id)
  if (data) {
    toast({
      title: 'Бронь с тура успешно снята.'
    })
    await getTourInfo(id)
  }
  if (error) {
    console.log(error)
  }
}


const payTour = async (id:number, sum:number) => {
  const response = await axios.get('https://yoomoney.ru/quickpay/confirm', {
    method: 'GET',
    params: {
      'receiver': '4100116109198047',
      'quickpay-form': 'button',
      'paymentType': 'AC',
      'sum': sum,
      'label': JSON.stringify({tour: id, user: 3}),
    }
  })
  navigateTo(response.request.responseURL, {external: true})
}

</script>

<template>
  <Loader :show="loaderState"/>

  <main class="container flex flex-col justify-start items-center flex-grow gap-5" v-if="tourData">
    <h2 class="text-4xl text-center">{{ tourData.name }}</h2>
    <div class="grid grid-cols-12 gap-5 w-full grid-rows-2 xl:grid-rows-1">
      <div class="flex col-start-1 xl:col-end-10 col-end-13">
        <img :src="tourData.image" class="aspect-video rounded-2xl w-full" :alt="tourData.name">
      </div>
      <div class="flex flex-col border xl:col-start-10 xl:col-end-13 col-start-1 col-end-13 rounded-2xl p-5 justify-between row-start-2 xl:row-start-1">
        <div class="flex flex-col gap-3">
          <div class="flex justify-start items-center gap-5 p-3 border rounded-lg"><span class="text-2xl">Цена: </span><span class="pt-1">{{ tourData.price }} руб.</span></div>
          <div class="flex justify-start items-center gap-5 p-3 border rounded-lg"><span class="text-2xl">Количество мест: </span><span class="pt-1">{{ tourData.seats }}</span></div>
          <div class="flex justify-start items-center gap-5 p-3 border rounded-lg"><span class="text-2xl">Свободные места:  </span><span class="pt-1">{{ tourData.availableSeats }}</span></div>
          <div class="flex justify-start items-center gap-5 p-3 border rounded-lg"><span class="text-2xl">Отправление:  </span><span class="pt-1">{{ tourData.departureDate }}</span></div>
          <div class="flex justify-start items-center gap-5 p-3 border rounded-lg"><span class="text-2xl">Прибытие:  </span><span class="pt-1">{{ tourData.arrivalDate }}</span></div>

        </div>
        <div class="flex flex-col gap-3">
          <Button v-show="!authStore.isAdmin && !tourData.isBook" @click="bookTour(tourData.id)">Забронировать</Button>
          <Button v-show="!authStore.isAdmin && tourData.isBook" @click="removeBookTour(tourData.id)" variant="destructive">Отменить Бронь</Button>
          <Button v-show="!authStore.isAdmin && tourData.isBook" @click="payTour(tourData.id, tourData.price)">Оплатить</Button>

          <Button v-show="authStore.isAdmin" @click="navigateTo(`/tour/${tourData.id}/edit`)">Редактировать</Button>
          <Button v-show="authStore.isAdmin" @click="navigateTo(`/tour/${tourData.id}/users`)">Пользователи</Button>
          <DeleteTourMessage :id="tourData.id" v-if="authStore.isAdmin"/>
        </div>
      </div>
    </div>
    <p class="whitespace-pre-line">{{ tourData.description }}</p>
  </main>
</template>

<style scoped>

</style>